<!-- 模板 -->
<template>
	<div class='aui-confirm' v-show='show' v-on:touchmove.prevent>
		<transition :name="maskerTransition">
        	<div class='aui-confirm__masker' v-show='isComponentShow'></div>
		</transition>
        <div class='aui-confirm__inner'>
        	<transition :name="dialogTransition" v-on:after-leave="afterLeave">
        		<div class='aui-confirm__inner__dialog' v-show='isComponentShow'>
	                <div class='aui-confirm__inner__dialog__content'>
	                    <h2 class='aui-confirm__inner__dialog__content__title'>{{title}}</h2>
	                    <p class='aui-confirm__inner__dialog__content__msg'>{{msg}}</p>
	                </div>
	                <div class='aui-confirm__inner__dialog__buttons aui-line-top'>
	                    <a href='javascript:;' @click.prevent='onOk' class='aui-confirm__inner__dialog__buttons__button'>{{ okBtn }}</a>
                		<a href='javascript:;' @click.prevent='onCancel' class='aui-confirm__inner__dialog__buttons__button aui-line-left'>{{cancelBtn}}</a>
	                </div>
	            </div>
        	</transition>
        </div>
    </div>
</template>

<!-- js -->
<script>
	export default{
		data(){
			return{
	    		isComponentShow: !1,
	    		maskerTransition: "aui-confirm-masker",
	    		dialogTransition: "aui-confirm",
				show: !1,
				isEmit: ""
			}
		},
		props: {
			title: {
				type: String,
				default: "提示"
			},
			msg: {
				type: String,
				default: ""
			},
			okBtn: {
				type: String,
				default: "确定"
			},
			cancelBtn: {
				type: String,
				default: "取消"
			},
			okCb: null,
			cancelCb: null
		},
		methods: {
			onShow(vm) {
				this.show = !0;
				setTimeout(() => {
					this.isComponentShow = !0;
				}, 10);
			},
			onHide() {
				this.isComponentShow = !1;
				setTimeout(() => {
					this.show = !1;
				}, 200);
			},
			onOk() {
				this.isEmit = "ok";
				this.onHide();
			},
			onCancel() {
				this.isEmit = "cancel";
				this.onHide();
			},
			// 点击确认按钮之后，可能会存在回调事件
			afterLeave(){
				if(this.isEmit == "ok"){
					this.okCb && this.okCb();
				}else if(this.isEmit == "cancel"){
					this.cancelCb && this.cancelCb();
				}
			}
		}
	}
</script>


<!-- scss -->
<style lang="scss" scoped>
	@import "../../styles/components/confirm/index.scss";
</style>